<script setup>
import { ref,watch} from 'vue';
import router from "@/router/index.js";
import {all} from "@/utils/config.js"
import {SearchStore} from "@/stores/SearchList.js";
const Search = SearchStore()
const items = ref([
]);
const SearchData = ref(Search.SearchList.value)
watch(()=> Search.SearchList,(newValue)=>{
  console.log(Search.SearchList.value)
  items.value = newValue
},{
  deep:true
})


const getItemlist = async()=>{
  console.log(Search.SearchList.value)
  if(Search.SearchList.value != undefined){
    items.value = await Search(Search.SearchList.value)
  }else{
    const res =await all()
    console.log(res)
    items.value = res.data.rows
  }

}
getItemlist()
const navigateToGoods = (item) => {
  router.push({
    path: '/Goods',
    query: {
      name:item.name,
      price: item.price,
      description: item.description,
      image: encodeURIComponent(item.image),
      stock:item.stock,
      id:item.id,
    }
  });
};
</script>

<template>
  <div class="new-course">
    <div class="contentTitle">
      <div class="contentTitle-left">
        <div class="hot">
          <div class="hot-l">HOT</div>
          <div class="hot-r"></div>
        </div>
        <div class="txt">
          <div class="txt-top">新鲜好物</div>
          <div class="txt-bottom"></div>
        </div>
      </div>
    </div>
    <div class="newCourseContent">
      <ul>
        <li class="courseItem" v-for="item in items":key="item.name"@click="navigateToGoods(item)">
          <div class="courseInfo">
            <div class="courseBg">
              <img :src="item.image"/>
            </div>
            <div class="courseName">{{item.name}}</div>
            <div>{{item.description}}</div>
            <div class="stock">库存：{{item.stock}}</div>
            <div class="coursePricePri">{{item.price}}元</div>
          </div>
        </li>
      </ul>
    </div>
  </div>

</template>


<style scoped>
.new-course{
  width: 1200px;
  margin: 0 auto;
  background-color: white;
  height: 800px;
}
.contentTitle{
  display: flex;
  justify-content: space-between;
}
.contentTitle-left{
  display: flex;
}
.hot{
  display: flex;
  height: 38px;
}
.hot-l{
  height: 38px;
  font-size: 20px;
  padding: 0 10px;
  text-align: center;
  line-height: 37px;
  color: #ffffff;
  border-radius: 8px 0 8px 8px;
  background: linear-gradient(90deg,#ffffff 0%,#fc685c 100%);
}
.hot-r{
  width: 0;
  height: 0;
  border: 6px solid #fc689c;
  border-right-color: transparent;
  border-bottom-color: transparent;
}
.txt{
  position: relative;
  height: 30px;
  margin-left: 10px;
}
.txt-top{
  font-size: 24px;
  padding: 0 5px;
  color: #222222;
  line-height: 31px;
}
.txt-bottom{
  position: absolute;
  top: 25px;
  left: 0px;
  width: 100%;
  height: 13px;
  background:linear-gradient(90deg,#fbf84f 0%,#fea935 100%) ;
  border-radius: 7px;
  z-index: -1;
}

.newCourseContent{
  width: 1200px;
  margin: 15px auto 0px auto;
}
.newCourseContent ul{
  display: flex;
  flex-wrap: wrap;
}
.courseItem{
  width: 285px;
  height: 200px;
  margin: 0 20px 20px 0;
  transition: margin-top 0.2s;
  margin-bottom: 90px;
}
.courseItem:hover{
  margin-top: -10px;
  cursor: pointer;
}
.courseItem:nth-child(4n+0){
  margin-right: 0 !important;
}
.courseInfo{
  position: relative;
  width: 100%;
  height: 270px;
  background: #ffffff;
  box-shadow: 1px 1px 10px rgb(27 39 94 / 40%);
  opacity: 1;
  border-bottom-left-radius: 6px;
  border-bottom-right-radius: 6px;
  overflow: hidden;
  text-decoration: none;
}
.courseBg{
  position: relative;
  width: 300px;
  height: 160px;
}
.courseBg img{
  width: 100%;
  height: 100%;
}
.courseName{
  margin: 10px;
  font-weight: bold;
  font-size: 14px;
  color: #333333;
  display: -webkit-box;
  overflow: hidden;
}

.coursePricePri{
  width: 75px;
  font-size: 14px;
  margin-top: 5px;
  padding: 0 13px;
  color: rgba(255,114,127,1);
  font-weight: 700;
}
.stock{
  margin-top: 6px;
  color: #8d8b8b;
}
</style>